<template>
	<view class="bind-phone-container page-container">
		<view class="header-section">
			<text class="page-title">绑定手机号</text>
			<text class="page-desc">绑定手机号后，可用于登录和找回密码</text>
		</view>

		<view class="form-section">
			<view class="form-card">
				<view class="form-item">
					<text class="form-label">手机号</text>
					<input class="form-input" v-model="formData.mobile" placeholder="请输入手机号" type="number"
						maxlength="11" />
					<text v-if="formErrors.mobile" class="error-text">{{ formErrors.mobile }}</text>
				</view>

				<view class="form-item">
					<text class="form-label">验证码</text>
					<view class="verify-code-wrapper">
						<input class="verify-input" v-model="formData.verifyCode" placeholder="请输入6位验证码" type="number"
							maxlength="6" />
						<view class="verify-btn" :class="{ disabled: countdown > 0 || !isValidPhone(formData.mobile) }"
							@click="sendVerifyCode">
							<text class="verify-btn-text">{{ countdown > 0 ? `${countdown}s后重发` : '获取验证码' }}</text>
						</view>
					</view>
					<text v-if="formErrors.verifyCode" class="error-text">{{ formErrors.verifyCode }}</text>
				</view>
			</view>
		</view>

		<view class="button-section">
			<view class="submit-btn" :class="{ disabled: !canSubmit || loading }" @click="submitForm">
				<text class="submit-btn-text">{{ loading ? '绑定中...' : '确认绑定' }}</text>
			</view>
		</view>

		<view class="tips-section">
			<text class="tips-title">温馨提示：</text>
			<text class="tips-text">• 手机号绑定后可用于登录和找回密码</text>
			<text class="tips-text">• 请确保手机号码真实有效</text>
			<text class="tips-text">• 验证码有效期为5分钟</text>
		</view>
	</view>
</template>

<script>
	import {
		validatePhone,
		validateVerifyCode
	} from '@/common/validate.js'

	export default {
		data() {
			return {
				loading: false,
				countdown: 0,
				formData: {
					mobile: '',
					verifyCode: ''
				},
				formErrors: {
					mobile: '',
					verifyCode: ''
				}
			}
		},
		computed: {
			canSubmit() {
				return this.isValidPhone(this.formData.mobile) &&
					this.formData.verifyCode &&
					this.formData.verifyCode.length === 6
			}
		},
		methods: {
			// 验证手机号格式
			isValidPhone(phone) {
				return validatePhone(phone)
			},

			// 验证表单
			validateForm() {
				this.formErrors = {
					mobile: '',
					verifyCode: ''
				}
				let isValid = true

				if (!this.formData.mobile) {
					this.formErrors.mobile = '请输入手机号'
					isValid = false
				} else if (!this.isValidPhone(this.formData.mobile)) {
					this.formErrors.mobile = '请输入正确的手机号格式'
					isValid = false
				}

				if (!this.formData.verifyCode) {
					this.formErrors.verifyCode = '请输入验证码'
					isValid = false
				} else if (!validateVerifyCode(this.formData.verifyCode, 6)) {
					this.formErrors.verifyCode = '验证码为6位数字'
					isValid = false
				}

				return isValid
			},

			// 发送验证码
			async sendVerifyCode() {
				if (this.countdown > 0 || !this.isValidPhone(this.formData.mobile)) {
					if (!this.isValidPhone(this.formData.mobile)) {
						uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						})
					}
					return
				}

				this.$api.user.GetVerifyCode2({
					mobile: this.formData.mobile
				}).then(res => {
					uni.showToast({
						title: '验证码已发送',
						icon: 'success'
					})

					this.startCountdown()
				})
			},

			// 开始倒计时
			startCountdown() {
				this.countdown = 60
				const timer = setInterval(() => {
					this.countdown--
					if (this.countdown <= 0) {
						clearInterval(timer)
					}
				}, 1000)
			},

			// 提交表单
			async submitForm() {
				if (!this.canSubmit || this.loading) {
					return
				}

				if (!this.validateForm()) {
					return
				}

				this.loading = true

				this.$api.user.updateUserBaseInfo({
					info: {
						mobile: this.formData.mobile
					},
					verifyMobile: this.formData.mobile,
					captcha: this.formData.verifyCode
				}).then(res => {
					this.loading = false
					this.userInfo.mobile = this.$secret.encryptAES(this.formData.mobile)
					this.userInfo.mobile_hidden = this.$tools.hidePhoneNumber(this.formData.mobile)
					this.$store.dispatch('updateUserInfo', this.userInfo)
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}).catch(error => {
					this.loading = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bind-phone-container {
		background-color: #f8f9fa;
		min-height: 100vh;
		padding: 20rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	}

	.header-section {
		text-align: center;
		padding: 60rpx 20rpx 40rpx;
	}

	.page-title {
		display: block;
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.page-desc {
		display: block;
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
	}

	.form-section {
		margin-bottom: 40rpx;
	}

	.form-card {
		background-color: white;
		border-radius: 16rpx;
		padding: 40rpx;
	}

	.form-item {
		margin-bottom: 40rpx;
	}

	.form-item:last-child {
		margin-bottom: 0;
	}

	.form-label {
		display: block;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 15rpx;
		font-weight: 500;
	}

	.form-input {
		width: 100%;
		height: 88rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 12rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		background-color: #fff;
	}

	.form-input:focus {
		border-color: #52a58a;
	}

	.verify-code-wrapper {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.verify-input {
		flex: 1;
		height: 88rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 12rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		background-color: #fff;
	}

	.verify-input:focus {
		border-color: #52a58a;
	}

	.verify-btn {
		width: 200rpx;
		height: 88rpx;
		background-color: #52a58a;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.verify-btn.disabled {
		background-color: #e5e5e5;
		cursor: not-allowed;
	}

	.verify-btn-text {
		color: white;
		font-size: 26rpx;
	}

	.verify-btn.disabled .verify-btn-text {
		color: #999;
	}

	.error-text {
		display: block;
		font-size: 24rpx;
		color: #ff4757;
		margin-top: 10rpx;
	}

	.button-section {
		padding: 0 20rpx;
		margin-bottom: 40rpx;
	}

	.submit-btn {
		width: 100%;
		height: 88rpx;
		border-radius: 12rpx;
		background-color: #52a58a;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.submit-btn.disabled {
		background-color: #e5e5e5;
		cursor: not-allowed;
	}

	.submit-btn-text {
		color: white;
		font-size: 28rpx;
		font-weight: 500;
	}

	.submit-btn.disabled .submit-btn-text {
		color: #999;
	}

	.tips-section {
		background-color: white;
		border-radius: 16rpx;
		padding: 30rpx;
	}

	.tips-title {
		display: block;
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.tips-text {
		display: block;
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
		margin-bottom: 10rpx;
	}

	.tips-text:last-child {
		margin-bottom: 0;
	}
</style>